<template>
	<view class="overHidden">
		<view class="flex padding-lr padding-top-xs" v-if="imgs.length == 1">
			<image
        class="flex-sub radius-24"
        v-for="(item,index) in imgs"
        :src="item.thumb"
        mode="widthFix"
        @click="navTo(item.href)"
        :key="index"
        lazy-load
      ></image>
		</view>
		<view class="flex padding-lr padding-top-xs row-2" v-if="imgs.length == 2">
			<image
        class="flex-sub radius-24"
        v-for="(item,index) in imgs"
        :src="item.thumb"
        mode="widthFix"
        @click="navTo(item.href)"
        :key="index"
        lazy-load
      ></image>
		</view>
		<view class="flex padding-lr padding-top-xs row-3" v-if="imgs.length == 3">
			<view class="flex-sub" style="width: 335rpx">
				<image class="radius-24" :src="imgs[0].thumb" mode="widthFix" @click="navTo(imgs[0].href)" lazy-load></image>
			</view>
			<view class="flex-sub flex flex-direction" style="width: 335rpx">
				<image class="flex-sub radius-24" :src="imgs[1].thumb" mode="widthFix" @click="navTo(imgs[1].href)" lazy-load></image>
				<image class="flex-sub radius-24" :src="imgs[2].thumb" mode="widthFix" @click="navTo(imgs[2].href)" lazy-load></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['typeid'],
		data(){
			return{
				imgs:[]
			}
		},
		created() {
			this.loadData();
		},
		methods:{
			loadData(){
				this.$api.post(global.apiUrls.postAdvert,{
          typeid: this.typeid,
        })
        .then(res => {
					console.log("广告位", res);
					if (res.data.code == 1) {
						this.imgs = res.data.data;
					}
				}).catch(err => {
					console.log("广告图 ERROR: ",err);
				})
			},
			navTo(path) {
				if(path.includes('type=tabbar')){
					uni.switchTab({
						url: path
					})
				}else if(path.includes('isLogin=true')){
					this.$util.actionAuth(() => {
						uni.navigateTo({
							url: path
						});
					})
				}else{
					uni.navigateTo({
						url: path
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.row-2{
		image+image{
			margin-left: 20rpx;
		}
	}
  .row-3{
    view+view{
      margin-left: 20rpx;
    }
    image+image{
      margin-top: 20rpx;
    }
  }
	.radius-24{
		border-radius: 24rpx;
	}
  image{
    background-color: #EEEEEE;
  }

</style>
